<script setup>
import languageIcon from '@/components/iconSvg/languageIcon.vue'
import userIcon from '@/components/iconSvg/userIcon.vue'
import profileIcon from '@/components/iconSvg/profileIcon.vue'
import exitIcon from '@/components/iconSvg/exitIcon.vue'
import { useI18n } from 'vue-i18n'
import { NIcon } from 'naive-ui'
import mitt from '@/mitt/index'

import { useRouter } from 'vue-router'

const { t } = useI18n()

const router = useRouter()

const options = [
  {
    label: 'English',
    key: 'en'
  },
  {
    label: '简体中文',
    key: 'zh-cn'
  }
]
const language = (
  (navigator.language ? navigator.language : navigator.userLanguage) || 'ch'
).toLowerCase()
const localLang = localStorage.getItem('lang')
const lang = ref(localLang ? localLang : language)
const handleSelect = (key) => {
  lang.value = key
}
watch(
  lang,
  (value) => {
    localStorage.setItem('lang', value)
    mitt.emit('changeLanguage', value)
  },
  {
    immediate: true
  }
)

const localTheme = localStorage.getItem('theme')
const theme = ref(localTheme ? localTheme : 'light')

watch(
  theme,
  (value) => {
    localStorage.setItem('theme', value)
    mitt.emit('changeTheme', value)
  },
  {
    immediate: true
  }
)

function renderIcon(icon) {
  return () => {
    return h(
      NIcon,
      { size: 16 },
      {
        default: () => h(icon)
      }
    )
  }
}
const userOptions = computed(() => {
  return [
    {
      label: t('permission.userProfile'),
      key: 'profile',
      icon: renderIcon(profileIcon)
    },
    {
      label: t('permission.logout'),
      key: 'logout',
      icon: renderIcon(exitIcon)
    }
  ]
})
const handleUserSelect = (value) => {
  console.log(value)
  if (value == 'profile') {
    router.push({
      path: '/home/profile'
    })
  }
}
</script>

<template>
  <div class="w-full h-14 flex items-center">
    <div class="px-2 flex items-center justify-between w-full">
      <div></div>
      <div class="flex items-center">
        <n-tabs
          type="segment"
          animated
          size="small"
          style="width: 100px"
          v-model:value="theme"
          class="mr-2"
        >
          <n-tab name="light"> {{ $t('system.light') }} </n-tab>
          <n-tab name="dark"> {{ $t('system.dark') }} </n-tab>
        </n-tabs>
        <n-dropdown
          placement="bottom-start"
          trigger="hover"
          :options="options"
          @select="handleSelect"
        >
          <n-button quaternary>
            <template #icon>
              <n-icon><languageIcon /></n-icon>
            </template>
            {{ $t('system.language') }}
          </n-button>
        </n-dropdown>
        <n-dropdown
          :options="userOptions"
          placement="bottom-start"
          trigger="hover"
          @select="handleUserSelect"
        >
          <n-button quaternary type="primary">
            <template #icon>
              <n-icon><userIcon /></n-icon>
            </template>
            Admin
          </n-button>
        </n-dropdown>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
